<template>
  <div class="chognzhi_box">
    <van-tabs v-model="active">
      <van-tab title="支付宝">
        <div class="zhifu_div">
          <i class="zhifu_img" @click="showPopup">
            <img :src="tupian+msg.alipay_qrcode" alt />
          </i>
          <p class="zhifu_tishi">扫码充值</p>
          <ul class="zhifu_ul">
            <li class="zhifu_li">
              <span>支付宝昵称</span>
              <input type="text" v-model="nicheng" placeholder="请填写支付宝昵称" />
            </li>
            <li class="zhifu_li">
              <span>金额</span>
              <input type="text" v-model="jine" placeholder="请填写充值金额" />
            </li>
          </ul>
          <p class="zhufu_tishi">温馨提示：请准确填写基本信息，避免充值信息核对错误！</p>
          <button class="zhifu_btn" @click="zhifubao">确认提交</button>
        </div>
      </van-tab>
      <van-tab title="微信">
        <div class="zhifu_div">
          <div class="ba_ff">
            <i class="zhifu_img" @click="wechatPopup">
              <img :src="tupian+msg.wechat_qrcode" alt />
            </i>
            <p class="zhifu_tishi">扫码充值</p>
          </div>
          <ul class="zhifu_ul">
            <li class="zhifu_li">
              <span>微信昵称</span>
              <input type="text" v-model="nicheng2" placeholder="请填写微信昵称" />
            </li>
            <li class="zhifu_li">
              <span>金额</span>
              <input type="text" v-model="jine2" placeholder="请填写充值金额" />
            </li>
          </ul>
          <p class="zhufu_tishi">温馨提示：请准确填写基本信息，避免充值信息核对错误！</p>
          <div></div>
          <button class="zhifu_btn" @click="weixin">确认提交</button>
        </div>
      </van-tab>
      <van-tab title="银行卡">
        <div class="yinhangka_div yinhangka_div_span">
          <h3 class="yinhangka_h3">转账信息</h3>
          <p class="yinhangka_div_p">
            <span class="span_whidth">银行名称：</span>
            {{car.bank_name}}
          </p>
          <p class="yinhangka_div_p">
            <span class="span_whidth">银行卡号：</span>
            {{car.bnak_card_num}}
          </p>
          <p class="yinhangka_div_p yinhangka_div_fiex">
            <span class="span_whidth">开户名称：</span>
            <!-- <span v-model="fuzhulujing"> {{car.bank_card_name}}</span> -->
            <input type="text" v-model="fuzhulujing" value />
            <button
              type="button"
              class="btn fuzhi_btn"
              v-clipboard:copy="fuzhulujing"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >复制信息</button>
          </p>
        </div>
        <div class="yinhangka_div yinhangka_div_span">
          <span class="span_whidth">银行卡号:</span>
          <input type="number" v-model="yinnumber" placeholder="请填写银行卡号" />
        </div>
        <div class="yinhangka_div yinhangka_div_span">
          <span class="span_whidth">金额:</span>
          <input type="number" v-model="jine3" placeholder="请填写充值金额" />
        </div>
        <p class="yinhangka_p2">温馨提示：请准确填写基本信息，避免充值信息核对错误！</p>
        <button class="yinhang_btn" @click="yinhang_btn">确认提交</button>
      </van-tab>
    </van-tabs>
    <!-- 支付宝图片放大弹窗 -->
    <van-popup v-model="alipayshow">
      <div class="alipay_img_amplification">
        <img :src="tupian+msg.alipay_qrcode" alt />
      </div>
    </van-popup>
    <!-- 微信图片放大弹窗 -->
    <van-popup v-model="wechatshow">
      <div class="alipay_img_amplification">
        <img :src="tupian+msg.wechat_qrcode" alt />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { base } from "../../config";
export default {
  data() {
    return {
      alipayshow: false, //图片放大图片
      wechatshow: false, //微信放大图片
      tupian: base,
      active: 0,
      msg: "", //存放src图片变量
      // 支付宝
      nicheng: "", //支付宝昵称
      jine: "", //支付宝请填写充值金额
      // 微信
      nicheng2: "", //微信昵称
      jine2: "", //微信请填写充值金额
      //银行卡
      car: "",
      yinhang: "", //银行名称
      yinhangka: "", //银行卡号
      xingming: "", //开户名称：
      yinnumber: "", //请填写银行卡号
      jine3: "", //请填写 银行卡充值金额
      //   复制
      fuzhulujing: ""
    };
  },
  // 模板渲染之前请求
  created() {
    // get 请求
    this.http.get("/api/member/recharge/getway").then(res => {
      if (res.status_code == 200) {
        this.msg = res.data;
        this.car = res.data;
        this.fuzhulujing = res.data.bank_card_name;
      } else {
        this.$toast(res.message);
      }
    });
  },

  methods: {
    //支付宝的提交
    async zhifubao() {
      // 判断为空
      if (!this.nicheng || !this.jine) {
        // 提示
        this.$toast("请输入完善信息");
        return;
      }
      // 对接口
      try {
        let res = await this.http.post("/api/member/recharge", {
          //   对参数
          alipay_nick: this.nicheng,
          amount: this.jine,
          recharge_type: 1 //传后台1,2,3用什么支付
        });
        //   判断
        //
        if (res.status_code == 200) {
          this.$toast("提交成功");
          this.$store.dispatch("asyncGetUserInfo");
          this.$router.back();
        } else {
          this.$toast(res.message);
        }
      } catch (error) {
        // this.$toasted.error(error.message, { icon: "error" }).goAway(200);
      }
    },
    //微信的提交
    async weixin() {
      // 判断为空
      if (!this.nicheng2 || !this.jine2) {
        // 提示
        this.$toast("请输入完善信息");
        return;
      }
      // 对接口
      try {
        let res = await this.http.post("/api/member/recharge", {
          // 对参数
          wechat_nick: this.nicheng2,
          amount: this.jine2,
          recharge_type: 2 //传后台1,2,3用什么支付
        });
        // 判断 提交成功与失败
        if (res.status_code == 200) {
          // 提示
          this.$toast("提交成功");
          this.$store.dispatch("asyncGetUserInfo");
          this.$router.back();
        } else {
          this.$toast(res.message);
        }
      } catch (error) {
        // this.$toasted.error(error.message, { icon: "error" }).goAway(2000);
      }
    },
    //复制按钮
    onCopy(e) {
      this.$toast("复制成功");
    },
    onError(e) {
      this.$toast("复制失败");
    },

    //银行卡
    async yinhang_btn() {
      // 判断为空
      if (!this.yinnumber || !this.jine3) {
        // 提示
        this.$toast("请填写完善信息");
        return;
      }
      // 对接口
      try {
        let res = await this.http.post("/api/member/recharge", {
          bank_card: this.yinnumber,
          amount: this.jine3,
          recharge_type: 3 //传后台1,2,3用什么支付
        });
        // 判断 提交成功与失败

        if (res.status_code == 200) {
          this.$toast("提交成功");
          this.$store.dispatch("asyncGetUserInfo");
          this.$router.back();
        } else {
          this.$toast(res.message);
        }
      } catch (error) {
        // this.$toasted.error(error.message, { icon: "error" }).goAway(2000);
      }
    },
    // 点击微信跟支付宝二维码放大
    wechatPopup() {
      this.wechatshow = true;
    },
    showPopup() {
      this.alipayshow = true;
    }
  }
};
</script>

<style>
@import url("../../assets/css/ttcp/chongzhi.css");
.chognzhi_box {
  /*background-color: #F2F2F2;*/
  height: 100vh;
}

.zhifu_div {
  background-color: #fff;
}

.ba_ff {
  background-color: #fff;
}
.chognzhi_box .van-tabs--line .van-tabs__wrap {
  background: #fff;
}
.yinhangka_div_fiex {
  display: flex;
  justify-content: flex-start;
  height: 0.3rem;
  line-height: 0.3rem;
}
.yinhangka_div_span .span_whidth {
  width: 22%;
  display: inline-block;
}
.alipay_img_amplification {
  padding: 0.3rem;
}
.alipay_img_amplification img {
  width: 100%;
  height: 100%;
}
/* .header_wrap .header{z-index: 999;} */
.yinhangka_div_fiex{height: 0.5rem;line-height: 0.5rem;}
</style>